import React, { Component } from 'react'
import { Table,Button,notification,Avatar } from 'antd';
import axios from "axios"
import style from "./users.module.css"
import { SmileOutlined,SearchOutlined,RightSquareOutlined } from '@ant-design/icons';

export default class Users extends Component {
    state={

        // 是否使用新老数据
        isshow:false,

        // 存放请求users数据
        dataList:[],

        // 存放模糊查询最终数据
        newList:[],
        // 


        // 表格每一列的内容
      columns : [

            {
              title: 'ID',
              dataIndex: 'id',
              key: 'id',
              render: text => <b>{text}</b>,
            },

            {
              title: '用户名',
              dataIndex: 'username',
              key: 'username',
            },
            {
              title: '邮箱',
              dataIndex: 'email',
              key: 'email',
            },

            {
                title: '电话',
                dataIndex: 'tel',
                key: 'tel',
            },

            {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
            },
          
            {
              title: '操作',
              key: 'action',
              render: (text) => 
               {
                // console.log(text)
                return <div>
                            <Button type="primary" size="small" onClick={()=>{this.resetFn(text)}} className={style.resetbtn}>重置密码</Button>
                            <Button type="danger" size="small"  onClick={()=>{this.delFn(text)}}>删除</Button>
                       </div>
               }
          
              ,
            },
          ]

    }


    //点击重置密码函数，被重置为666666
    resetFn(text){
        // console.log(text)

        // 后台数据更新
        axios.put(`http://localhost:5000/users/${text.id}`,{
            ...text,
            "password":666666
        }).then(res=>{
            // console.log(res.data)

            // 页面数据更新
            this.setState({
                dataList:this.state.dataList.map(item=>{
                    if(text.id===item.id){
                        return {
                            ...item,
                            password:res.data
                        }
                    }else{
                        return item
                    }
                })
            })
            // console.log(this.state.dataList)
        })

        // 重置成功提醒
        notification.open({
            message: '重置密码成功！',
            description:
              'Password reset successfully',
            icon: <SmileOutlined style={{ color: 'yellow'}} />,
          });
    }


    // 点击删除函数
    delFn(text){
            // 后台数据删除
            axios.delete(`http://localhost:5000/users/${text.id}`).then(res=>{
                // console.log(res.data)
            })
            // 页面数据删除
            this.setState({
                dataList:this.state.dataList.filter(item=>item.id !== text.id)
            })
    }

    inputFn(){
        // console.log("shuju")
        // console.log(this.refs.myInput.value)
        let value = this.refs.myInput.value

        // 设置新的表格显示数据
     
            this.setState({
                newList:this.state.dataList.filter(item=>item.username.includes(value)),
                isshow:true
            })
        

    }

    componentDidMount(){
        // 请求users数据
        axios.get("http://localhost:5000/users").then(res=>{
            // console.log(res.data)
            this.setState({
                dataList:res.data
            })
        })


    }

    render() {
        return (
            <div>
                <div>
                    <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} icon={<SearchOutlined />}></Avatar>
                    {/* 文本框输入模糊查询 */}
                    <input type="text" placeholder="请输入用户名查询" onChange={()=>{this.inputFn()}} ref="myInput" className={style.inp} />
                    <span className={style.ic} onClick={()=>{
                        this.props.history.push("/user-manage/admin")
                    }}><RightSquareOutlined /></span>
                </div>
               
             
                <Table
                 columns={this.state.columns}
                  dataSource={this.state.isshow?this.state.newList:this.state.dataList}
                  rowKey={item=>item.id}   //每行加key值属性
                  Pagination ={{                    //每页显示条数属性
                    pageSize:5    
                }}
                   />
            </div>
        )
    }
}
